import React, { Component, lazy, Suspense } from 'react';
import { NavLink, Route, Switch } from 'react-router-dom';
// import Home from './views/home';
// import About from './views/about';

// 路由懒加载
const Home = lazy(() => import('./views/home'));
const About = lazy(() => import('./views/about'));

export default class App extends Component {
  render() {
    return (
      <div>
        <div className='row'>
          <div className='col-xs-offset-2 col-xs-8'>
            <div className='page-header'>
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className='row'>
          <div className='col-xs-2 col-xs-offset-2'>
            <div className='list-group'>
              <NavLink className='list-group-item' to='/home'>
                Home
              </NavLink>
              <NavLink className='list-group-item' to='/about'>
                About
              </NavLink>
            </div>
          </div>
          <div className='col-xs-6'>
            <div className='panel'>
              <div className='panel-body'>
                {/* 使用懒加载必须有一个 数据还在加载中的提示， Suspense这个就是用来提示的 必须加 */}
                <Suspense fallback={<h1>loading...</h1>}>
                  <Switch>
                    <Route path='/home' component={Home} />
                    <Route path='/about' component={About} />
                  </Switch>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
